<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PlantsPicture</title>
    <link rel='stylesheet' href="css/plantsPicture.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
   
</head>

<body>
    <?php
         include_once 'mydb.php';
       require_once 'pinyin.class';
        $pdo = getConnect();
       $pinyin=new EJCMS_Pinyin();

       $plantname=$_GET['Pname'];
       $plnpy=$pinyin->encode($plantname,"all");
        
  
          /* <!-- 轮播图 -->*/
    echo' <div class="lunbo">';
        echo' <div class="pic">';
           echo' <img src="../plantsImg/'.$plnpy.'1.jpg">';
           echo' <img src="../plantsImg/'.$plnpy.'2.jpg">';
           echo'<img src="../plantsImg/'.$plnpy.'3.jpg">';
           echo' <img src="../plantsImg/'.$plnpy.'4.jpg">';
            
         echo'</div>';
            
        
   ?>
         <!--列表小圆点-->
         <div class="list">
             <ul >
                 <li class="active"></li>
                 <li></li>
                 <li></li>
                 <li></li>
               
             </ul>
         </div>
         <!-- 箭头
         <div class="jiantou">
             <img src="../plantsImg/jiantou2.jpg" class="left">
             <img src="../plantsImg/jiantou1.jpg" class="right">
         </div> -->
     </div>

     <script type="text/javascript">
         var time=0;
         timeplay=null;

         $(".lunbo .list ul li").mouseover(function(){//鼠标放上去的时候
              clearInterval(timeplay);
              index=$(this).index();//获取序号
              $(this).addClass("active").siblings().removeClass("active");
              $(".lunbo .pic img").eq(index).show().siblings(".lunbo .pic img").hide();
              //如果被选的元素已经被显示，则隐藏该元素
               //eq()选择器选区带有指定index值的元素
         }).mouseout(function(){//鼠标离开的时候
             aa();
         });

         //自定义函数
         aa();
         function aa(){
             //设置时钟
             //var time=0
             timeplay=setInterval(function(){// 设置间隔 timeplay是时钟名字
                 time++;
                 if(time<4){
                     $(".lunbo ul li").eq(time).addClass("active").siblings().removeClass("active");
                     $(".lunbo .pic img").eq(time).show().siblings("img").hide();
                 }else{
                     time=-1;
                 }
             },1500); //1000ms=1s
         }
        //  //左切换
        //  $(".lunbo .jiantou .left").click(function(){
        //      time--;
        //      if(time>=0){
        //          $(".lunbo .list ul li").eq(time).addClass("active").siblings.removeClass("active");
        //          $(".lunbo .pic img").eq(time).show().siblings(".lunbo .pic img").hide();

        //      }else{
        //          time=4;
        //          $(".lunbo .list ul li").eq(time=3).addClass("active").siblings.removeClass("active");
        //          $(".lunbo .pic img").eq(time=3).show().siblings(".lunbo .pic img").hide();
        //      }
        //  });
        //  //鼠标放在箭头上，停止自动轮播
        //  $(".lunbo .jiantou .left").mouseover(function(){
        //      clearInterval(timeplay);
        //  }).mouseout(function(){
        //      aa();
        //  });
         
         
        //   //右切换
        //   $(".lunbo .jiantou .right").click(function(){
        //      time++;
        //      if(time<=3){
        //          $(".lunbo .list ul li").eq(time).addClass("active").siblings.removeClass("active");
        //          $(".lunbo .pic img").eq(time).show().siblings(".lunbo .pic img").hide();

        //      }else{
        //          time=-1;
        //          $(".lunbo .list ul li").eq(time=0).addClass("active").siblings.removeClass("active");
        //          $(".lunbo .pic img").eq(time=0).show().siblings(".lunbo .pic img").hide();
        //      }
        //  });

        //        //鼠标放在箭头上，停止自动轮播
        //        $(".lunbo .jiantou .right").mouseover(function(){
        //      clearInterval(timeplay);
        //  }).mouseout(function(){
        //      aa();
        //  });
     </script>

</body>
</html>